<template>
  <div class="login-container">
    <el-form @submit.prevent="handleLogin" class="login-form">
      <h2 class="form-title">医院门诊管理系统</h2>
      <div class="form-item" style="margin-top: 30px">
        <el-form-item label="账号:" class="form-item">
          <el-input type="text" v-model="username" required></el-input>
        </el-form-item>
        <el-form-item label="密码:" class="form-item">
          <el-input type="password" v-model="password" required></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 130px">
          <el-button type="primary" native-type="submit">登录</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      username: "",
      password: "",
      role: "", // 添加一个用于存储选择身份的变量
    };
  },
  methods: {
    handleLogin() {
      console.log("Username:", this.username);
      console.log("Password:", this.password);
      axios
        .get("http://192.168.228.82:8080/patient/login", {
          params: {
            id: this.username,
            password: this.password,
          },
        })
        .then((res) => {
          if (res.data.state === "0") {
            console.log("id不存在");
            ElMessage({
              message: "账号不存在，请重新输入",
              type: "error",
              plain: true,
              offset: 270,
              duration: 1000,
            });
          } else if (res.data.state === "1") {
            console.log("密码错误");
            ElMessage({
              message: "账号密码不一致，请重新输入",
              type: "error",
              plain: true,
              offset: 270,
              duration: 1000,
            });
          } else {
            console.log("登陆成功");
            console.log(res.data);
            localStorage.setItem("user", JSON.stringify(res.data.patient));
            ElMessage({
              message: "账号密码正确，正在跳转页面。。。",
              type: "success",
              plain: true,
              offset: 270,
              duration: 1000,
            });
            setTimeout(() => {
              this.$router.push("/user");
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.login-container {
  margin-top: 70px;
  width: 100%;
  max-width: 1200px; /* 设置最大宽度 */
  margin: 0 auto;
  padding: 20px; /* 增加内边距 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh; /* 设置最小高度 */
  position: relative; /* 添加相对定位 */
}

.login-form {
  width: 80vw; /* 设置表单宽度 */
  padding: 20px; /* 增加内边距 */
  border-radius: 10px; /* 添加圆角 */
  min-height: 300px; /* 设置最小高度 */
  position: absolute; /* 绝对定位 */
}

.form-title {
  text-align: center; /* 标题居中 */
  margin-bottom: 20px; /* 标题下方增加间距 */
  font-size: 24px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体加粗 */
}

.form-item {
  margin-bottom: 30px; /* 增加表单项之间的间距 */
}
</style>
